<!--
 * @Author: 郝奔 1425466221@qq.com
 * @Date: 2024-11-22 09:21:08
 * @LastEditors: 郝奔 1425466221@qq.com
 * @LastEditTime: 2024-12-26 13:41:01
 * @FilePath: /HG-dqbasic_open_platform/src/framework/components/base-comps/dt-dialog/index.vue
 * @Description: 
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
  <div class="">
    <el-dialog v-bind="attrs" :model-value="props.modelValue" :show-close="false"
      :fullscreen="typeof attrs?.fullscreen === 'boolean' ?? isFullscreen" :before-close="handleClose"
      :width="typeof attrs?.width === 'string' || typeof attrs?.width === 'number' ? attrs.width : '800px'"
      :close-on-click-modal="false" :destroy-on-close="true">
      <template #header>
        <div>
          <span class="dialog-title">{{ props.title }}</span>
        </div>
        <div class="btns">
          <el-icon v-if="isFullScreenBtn" @click="handleFullscreen">
            <FullScreen />
          </el-icon>
          <el-icon @click="handleClose">
            <Close />
          </el-icon>
        </div>
      </template>
      <div class="content" v-loading="props.loading">
        <!-- <slot name="content"></slot> -->
        <slot></slot>
      </div>

      <template v-if="!attrs?.footerSlot" #footer>
        <!-- 如果没有提供其他footer插槽，就使用默认的 -->
        <span v-if="!slots.footer" class="dialog-footer">
          <el-button @click="handleClose">{{ props.cancelText }}</el-button>
          <el-button v-prevent-reclick="3000" type="primary" @click="handleConfirm">{{
            props.confirmText
          }}</el-button>
        </span>
        <!-- 使用传入进来的插槽 -->
        <slot v-else name="footer"></slot>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { computed, ref, useAttrs, useSlots } from 'vue';
import { FullScreen, Close } from '@element-plus/icons-vue';
import { BEFORECLOSE } from '@/framework/constants/index.js';
const attrs = useAttrs();
// 获取插槽
const slots = useSlots();

// 当前是否处于全屏状态(如果设为true,打开弹窗的时候会是全屏状态)
const isFullscreen = ref(false);
// 是否显示全屏效果图标
const isFullScreenBtn = computed(() => {
  if (props.hiddenFullBtn) return false;
  if (attrs?.fullscreen) return false;
  return true;
});

interface PropsType {
  title?: string;
  isDraggable?: boolean;
  modelValue?: boolean;
  hiddenFullBtn?: boolean;
  loading?: boolean;
  confirmText?: string;
  cancelText?: string;
}

// defineProps适用于父组件向子组件传递属性
// prop属性定义，是通过defineProps函数进行处理的
// 给指定的prop属性给定默认值,通过函数withDefaults处理
const props = withDefaults(defineProps<PropsType>(), {
  title: '',
  isDraggable: false,
  modelValue: false,
  hiddenFullBtn: false,
  loading: false,
  confirmText: '保存',
  cancelText: '取消'
});

// defineEmits适用于父组件向子组件传递方法
const emits = defineEmits<{
  (e: 'update:modelValue'): void;
  (e: 'confirm'): void;
  (e: 'close'): void;
}>();

// 点击全屏事件
const handleFullscreen = (): void => {
  // 判断父组件fullscreen是不是ture,如果是true,在isFullScreenBtn的计算属性中会不显示全屏按钮(所以不需要给isFullscreen赋值)
  if (attrs?.fullscreen) return;
  isFullscreen.value = !isFullscreen.value;
};
const handleClose = (): void => {
  // 获取attrs.[BEFORECLOSE]属性，如果类型是函数函数，先执行它
  if (
    Reflect.has(attrs, BEFORECLOSE) &&
    typeof attrs[BEFORECLOSE] === 'function'
  ) {
    attrs[BEFORECLOSE]();
  }
  emits('close');
};
const handleConfirm = (): void => {
  emits('confirm');
};
// defineExpose适用于子组件向父组件暴露方法和属性，父组件通过子组件示例进行调用
defineExpose({
  isVisible: props.modelValue
});
</script>

<style lang="scss" scoped>
:deep(.el-dialog .el-dialog__header) {
  border-bottom: none;
  display: flex;
  padding: 24px;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-weight: 500;
}

:deep(.el-dialog) {
  min-height: 200px;
  max-height: calc(85vh - 85px);
  margin-bottom: 10vh;
  overflow: hidden;
  overflow-y: auto;
}

:deep(.el-dialog .el-dialog__body, .el-dialog .el-dialog__footer) {
  padding: 24px;
}


.dialog-title {
  line-height: 24px;
  font-size: 18px;
  color: #303133;
}

.btns {
  display: flex;
  align-items: center;

  i {
    margin-right: 8px;

    font-size: 16px;
    cursor: pointer;
  }

  i:last-child {
    margin-right: 0;
  }
}

:deep(.el-dialog .el-dialog__body .el-form .el-form-item) {
  margin-bottom: 24px !important;
}

:deep(.el-dialog .el-dialog__body .el-form .el-form-item--default .el-form-item__content) {
  line-height: 36px;
}

:deep(.el-dialog .el-dialog__body .el-form .el-form-item--default .el-form-item__content .el-input) {
  line-height: 36px;
  height: 36px;
}

:deep(.el-dialog .el-dialog__body .el-form .el-form-item--default .el-form-item__label) {
  line-height: 36px;
  height: 36px;
}
</style>
